<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.d1{
			color: green;
			background-color: #CCCCCC;
			border: 1px solid red;
			width: 250px;
		}
		.d2{
			position: absolute;
			width: 200px;
			height: 200px;
			border: 1px solid #FF00FF;
			background-color: red;
		}
	</style>
	<body>
		<div class="d1">红色方块为键盘操作区域，<br>您可以进行如下操作：<br>
		上：↑下：↓左：←右：→<br>
		Ctrl+1：背景色变为绿色<br>
		Ctrl+2：背景色变为黄色<br>
		Ctrl+3：背景色变为蓝色<br>
		Ctrl+4：背景色变为粉色<br>
		Ctrl+↑：放大<br>
		Ctrl+↓：缩小<br>
		</div>
		<div class="d2" id="d2"></div>
		<script type="text/javascript">
				var d2 = document.getElementById('d2');
				window.addEventListener(
					'keydown',
					function(e) {
						console.log(e.keyCode);
						// 向右
						if (e.keyCode == 39 || e.keyCode == 68) {							
							d2.style.left = (d2.offsetLeft + 10) + 'px';
						}
						// 向上
						if (e.keyCode == 38 || e.keyCode == 87) {							
							d2.style.top = (d2.offsetTop - 10) + 'px';
						}
						// 向下
						if (e.keyCode == 40 || e.keyCode == 83) {							
							d2.style.top = (d2.offsetTop + 10) + 'px';
						}
						// 向左
						if (e.keyCode == 37 || e.keyCode == 65) {							
							d2.style.left = (d2.offsetLeft - 10) + 'px';
						}
						// 判断div是否越界,越界则在另外一边重新进入边界
						var w = window.innerWidth;
						var h = window.innerHeight;
						if (d2.offsetLeft > w) {
							d2.style.left = 0 + 'px';
						}
						if (d2.offsetLeft < 0) {
							d2.style.left = w + 'px';
						}
						if (d2.offsetTop > h) {
							d2.style.top = 0 + 'px';
						}
						if (d2.offsetTop < 0) {
							d2.style.top = h + 'px';
						}
						
						var Ctrlkey = e.ctrlKey;
						// 变色
						if(e.ctrlKey){
							if(e.keyCode == 49 || e.keyCode == 97){
								d2.style.backgroundColor = "green";
							}
							if(e.keyCode == 50 || e.keyCode == 98){
								d2.style.backgroundColor = "yellow";
							}
							if(e.keyCode == 51 || e.keyCode == 99){
								d2.style.backgroundColor = "blue";
							}
							if(e.keyCode == 52 || e.keyCode == 100){
								d2.style.backgroundColor = "pink";
							}
							// 缩小放大
							// 放大
							if(e.keyCode == 38){
								var oldWidth = d2.offsetWidth;
								var oldHeight = d2.offsetHeight;
								
								d2.style.width = d2.offsetWidth * 1.5 + "px";
								d2.style.height = d2.offsetHeight * 1.5 + "px";
								
								d2.style.left = d2.offsetLeft - (d2.offsetWidth - oldWidth) / 2 + "px";
								d2.style.top = d2.offsetTop - (d2.offsetHeight - oldHeight) / 2 + "px";
							}
							// 缩小
							if(e.keyCode == 40){
								var oldWidth = d2.offsetWidth;
								var oldHeight = d2.offsetHeight;
								
								d2.style.width = d2.offsetWidth * 0.75 + "px";
								d2.style.height = d2.offsetHeight * 0.75 + "px";
								
								d2.style.left = d2.offsetLeft - (d2.offsetWidth - oldWidth) / 2 + "px";
								d2.style.top = d2.offsetTop - (d2.offsetHeight - oldHeight) / 2 + "px";
							}
						}						
						
						
					});
		</script>
		
	</body>
</html>
